<template>
  <div class="flex-column">
    <div class="text-right mb-10">
      <el-date-picker
        v-model="rangeDate"
        class="mr-10"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        :start-placeholder="$t('START_TIME')"
        range-separator="-"
        :end-placeholder="$t('END_TIME')"
        @change="search"
      />
      <el-select
        v-model="param.sysId"
        style="width: 300px"
        class="mr-10 inline-block"
        :placeholder="$t('SELECT_SYSTEM')"
        clearable
        @change="search"
      >
        <el-option
          v-for="item in dictList['SYSTEM_FLAG']"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model.trim="param.keyword"
        style="width: 300px"
        maxlength="32"
        clearable
        :placeholder="`${$t('USER_OPERATION')}/${$t('REQUEST_ADDRESS')}`"
        @keyup.enter.native="$debounce(search)"
      />
      <el-button type="primary" class="ml-10" @click="$debounce(search)">{{
        $t('QUERY')
      }}</el-button>
    </div>
    <el-table height="100%" :max-height="$limitHeight(175)" border :data="list">
      <template slot="empty">
        <NullData />
      </template>
      <el-table-column :label="$t('SEQUENCE')" align="center" type="index" :width="resetSize(60)">
        <template slot-scope="scope">
          <span>{{ (page.page - 1) * page.size + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column type="expand" fixed align="left">
        <template v-slot="{ row }">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item :label="$t('LOG_TYPE')">
              <span>{{ dictMap.LOG_TYPE[row.logType] }}</span>
            </el-form-item>
            <el-form-item :label="$t('SYSTEM_NAMESS')">
              <span>{{ dictMap.SYSTEM_FLAG[row.sysId] }}</span>
            </el-form-item>
            <el-form-item :label="$t('OPERATIONAL_INFOR')">
              <span>{{ row.info }}</span>
            </el-form-item>
            <el-form-item :label="$t('REQUEST_ADDRESS')">
              <span>{{ row.path }}</span>
            </el-form-item>
            <el-form-item :label="$t('PARAMETERS')">
              <span>{{ row.param }}</span>
            </el-form-item>
            <el-form-item :label="$t('IPADDRESS')">
              <span>{{ row.ip }}</span>
            </el-form-item>
            <el-form-item :label="$t('USER_OPERATION')">
              <span>{{ row.userId }}</span>
            </el-form-item>
            <el-form-item :label="$t('EXCEPTION')">
              <span>{{ row.exception }}</span>
            </el-form-item>
            <el-form-item :label="$t('RECORD_TIME')">
              <span>{{ row.recordTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column :label="$t('LOG_TYPE')" prop="logType" width="100" align="left">
        <template v-slot="{ row }">
          {{ dictMap.LOG_TYPE[row.logType] }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('SYSTEM_NAMESS')" prop="sysId" width="200" align="left">
        <template v-slot="{ row }">
          {{ dictMap.SYSTEM_FLAG[row.sysId] }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('USER_OPERATION')" prop="userId" width="100" align="left" />
      <el-table-column
        :label="$t('OPERATIONAL_INFOR')"
        prop="info"
        align="left"
        show-overflow-tooltip
      />
      <el-table-column :label="$t('REQUEST_ADDRESS')" prop="path" width="300" align="left" />
      <el-table-column :label="$t('IPADDRESS')" prop="ip" width="200" align="left" />
      <el-table-column :label="$t('RECORD_TIME')" prop="recordTime" width="160" align="left" />
    </el-table>
    <el-pagination
      class="mt-10 text-right"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :current-page="page.page"
      :page-size="page.size"
      :total="page.total"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import LogApi from '@/api/system/LogApi'

  export default {
    data() {
      return {
        list: [],
        param: {},
        rangeDate: null,
        page: {
          page: 1,
          size: 20,
          total: 0
        }
      }
    },
    computed: {
      ...mapGetters(['dictList', 'dictMap'])
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        if (this.rangeDate) {
          this.param.startTime = this.rangeDate[0]
          this.param.endTime = this.rangeDate[1]
        } else {
          this.param.startTime = null
          this.param.endTime = null
        }
        const param = Object.assign({}, this.page, this.param)
        LogApi.page(param).then(result => {
          if (result.list) {
            this.list = result.list
          } else {
            this.list = []
          }
          this.page.total = result.total
        })
      },
      search() {
        this.page.page = 1
        this.loadData()
      },
      sizeChange(size) {
        this.page.size = size
        this.loadData()
      },
      currentChange(page) {
        this.page.page = page
        this.loadData()
      }
    }
  }
</script>

<style scoped>
  .table-expand {
    font-size: 0;
    margin-left: 10px;
  }

  .table-expand :deep(label) {
    width: 100px;
    color: #99a9bf;
  }

  .table-expand :deep(.el-form-item) {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>
